<template>
	<view class="container">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="charge-container">
			<view class="header flex justify-between">
				<text class="header-text">交易</text>
				<text class="header-text">下单</text>
			</view>
			<view class="top-wrapper">
				<view class="flex justify-between align-center">
					<view class="reward flex flex-column align-center">
						<text class="label">盈亏</text>
						<text class="reward-value" :style="{color:accountInfo.yingkui_sum>=0?getUpColor:getDownColor}">{{parseFloat(accountInfo.yingkui_sum)>=0?"+"+accountInfo.yingkui_sum:accountInfo.yingkui_sum}}</text>
					</view>
					<router-link to="/pages/deposit/deposit" class="deposit-btn">存款</router-link>
				</view>
				<view class="top-line flex justify-between">
					<view class="top-line-item flex flex-column align-start">
						<text class="label">可用</text>
						<text class="value">{{accountInfo.money_keyong}}</text>
					</view>
					<view class="top-line-item flex flex-column align-center">
						<text class="label">占用</text>
						<text class="value">{{accountInfo.baozhengjin_sum}}</text>
					</view>
					<view class="top-line-item flex flex-column align-end">
						<text class="label">余额</text>
						<text class="value">{{accountInfo.money_yue}}</text>
					</view>
				
				</view>
				<view class="top-line flex justify-between" v-if="isExpend">
					<view class="top-line-item flex flex-column align-start">
						<text class="label">净值</text>
						<text class="value">{{accountInfo.jingzhi}}</text>
					</view>
					<view class="top-line-item flex flex-column align-center">
						<text class="label">保证金比例</text>
						<text class="value">{{accountInfo.baozhengjin_rate}}%</text>
					</view>
					<view class="top-line-item flex flex-column align-end">
					</view>
				</view>
				<view class="flex justify-center expend-line">
					<u-icon name="arrow-down" color="#999" class="arrow-down" :class="isExpend?'arrow-down-active':''"
						size="40" @tap="isExpend=!isExpend"></u-icon>
				</view>
			</view>
			<u-tabs item-width="187" class="tabs" height="84" :list="tabList" :current="current" @change="change"></u-tabs>
			<scroll-view scroll-y="true" class="scroll-view" :class="isExpend?'scroll-view-expend':''" v-if="accountInfo.orderlist">
				<template v-if="current==0">
					<hold :list="accountInfo.orderlist.hold_chi" @holdItemTap="holdItemTap" @closeOrder="closeOrder"></hold>
				</template>
				<template v-else-if="current==1">
					<pedding :list="accountInfo.orderlist.hold_wei" @peddingItemTap="peddingItemTap"></pedding>
				</template>
				<template v-else-if="current==2">
					<complate :list="accountInfo.orderlist.hold_cheng" @toComplateDetail="toComplateDetail"></complate>
				</template>
				<template v-else-if="current==3">
					<view class="more-list">
						<router-link class="more-item flex justify-between align-center" to="/pages/historyRecord/historyRecord">
							<text class="label">历史盈亏</text>
							<u-icon name="arrow-right" size="24" color="#999"></u-icon>
						</router-link>
						<router-link class="more-item flex justify-between align-center" to="">
							<text class="label">资金流水</text>
							<u-icon name="arrow-right" size="24" color="#999"></u-icon>
						</router-link>
					</view>
				</template>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		createWebsocket,
		sendSocketMessage
	} from '@/websocket/index.js'
	import {
		mapGetters,
		mapState,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				accountInfo:{},
				timer:null,
				tabList:[{name:"持仓"},{name:"挂单"},{name:"当日盈亏"},{name:"更多"}],
				current:0,
				isExpend:false,
			};
		},
		computed:{
			...mapState("user", ["isMock"]),
			...mapGetters("user", ["getToken","getUserInfo","getUpColor","getDownColor"]),
		},
		methods:{
			...mapMutations("user",["modifyIsMock"]),
			toComplateDetail(item){
				this.$Router.push({path:"/pages/complateDetail/complateDetail",query:{detail:item}})
			},
			async closeOrder(item){
				try{
					await this.$u.api.sellApi({
						oid:item.id
					})
					uni.showToast({
						icon:"success",
						title:"平仓成功"
					})
				}catch(e){
					//TODO handle the exception
				}
			},
			peddingItemTap(index){
				this.$set(this.accountInfo.orderlist.hold_wei[index],"expend",!this.accountInfo.orderlist.hold_wei[index].expend)
			},
			holdItemTap(index){
				this.$set(this.accountInfo.orderlist.hold_chi[index],"expend",!this.accountInfo.orderlist.hold_chi[index].expend)
			},
			switchAccount(){
				this.modifyIsMock(!this.isMock)
			},
			change(index){
				if(this.current==index){
					return false
				}
				this.current=index
			},
			websocketOpenCallback() {
				sendSocketMessage(JSON.stringify({
					action: "ajaxorder_list",
					token:this.getToken
				}))
				this.timer = setInterval(() => {
					sendSocketMessage(JSON.stringify({
						action: "ajaxorder_list",
						token:this.getToken
					}))
				}, 1000)
			},
			websocketMessageCallback({
				data
			}) {
				if(data.action == "ajaxorder_list"){
					let items
					let peddingItems
					if(this.accountInfo.orderlist){
						items=this.accountInfo.orderlist.hold_chi.map(item=>({sellprice:item.sellprice,expend:item.expend}))
						peddingItems=this.accountInfo.orderlist.hold_wei.map(item=>({BP1:item.BP1,SP1:item.SP1,expend:item.expend}))
					}
					this.accountInfo= data.res.data;
					if(items){
						this.accountInfo.orderlist.hold_chi.map((item,index)=>{
							this.$set(item,"expend",items[index].expend)
							this.$set(item,"isUp",parseFloat(items[index].sellprice) <=parseFloat(item.sellprice))
						})
					}
					if(peddingItems){
						this.accountInfo.orderlist.hold_wei.map((item,index)=>{
							this.$set(item,"expend",peddingItems[index].expend)
							this.$set(item,"BP1_UP",parseFloat(peddingItems[index].BP1) <=parseFloat(item.BP1))
							this.$set(item,"SP1_UP",parseFloat(peddingItems[index].SP1) <=parseFloat(item.SP1))
						})
					}
				}
			}
		},
		onShow() {
			//websocket
			createWebsocket()
			this.websocketOpenCallback()
			uni.$on("websocketMessage", this.websocketMessageCallback)
		},
		onHide() {
			uni.$off("websocketMessage", this.websocketMessageCallback)
			if (this.timer) {
				clearInterval(this.timer)
				this.timer = null
			}
		}
	}
</script>

<style lang="scss">
	.container {
		.status_bar {
			&::after{
				background:#fff;
			}
		}

		.charge-container {
			height: calc(100% - var(--status-bar-height));
			box-sizing: border-box;
			.header{
				height: 112rpx;
				padding:0 30rpx;
				background-color: #fff;
				.header-text {
					font-size: 36rpx;
					font-weight: 600;
					color: #333;
					line-height: 112rpx;
				}
			}
			.top-wrapper{
				padding: 10rpx 30rpx 10rpx;
				background-color: #fff;
				.label{
					font-size: 24rpx;
					color: #333;
					line-height: 34px;
					opacity: 0.7;
				}
				.value{
					font-size: 30rpx;
					color: #333;
				}
				.reward-value{
					margin-left: 10rpx;
					font-size: 48rpx;
					font-weight: 600;
				}
				.switch-account-btn{
					margin-left: auto;
					margin-right: 20rpx;
					width: 176rpx;
					height: 80rpx;
					font-size: 28rpx;
					text-align: center;
					color: $color-blue;
					line-height: 80rpx;
					background: #FFFFFF;
					border-radius: 40rpx;
				}
				.deposit-btn{
					width: 176rpx;
					height: 80rpx;
					font-size: 28rpx;
					text-align: center;
					color: #fff;
					line-height: 80rpx;
					background: $color-blue;
					border-radius: 40rpx;
				}
				.top-line{
					padding: 0 30rpx;
				}
				.top-line-item{
					width: 120rpx;
				}
				.expend-line {
					margin-top: 10rpx;
					height: 40rpx;
				
					.line-item {
						width: 50%;
					}
				
					.arrow-down {
						transition: all .3s ease;
					}
				
					.arrow-down-active {
						transform: rotate(180deg);
					}
				}
			}
			.tabs{
				margin-top: 20rpx;
				height: 84rpx;
			}
			.scroll-view{
				height: calc(100% - 532rpx);
				background-color: #fff;
			}
			.scroll-view-expend{
				height: calc(100% - 642rpx);
				background-color: #fff;
			}
		}
		.more-list{
			.more-item{
				padding: 30rpx;
				border-bottom: 1rpx solid #F0F8FF;
				&:last-child{
					border-bottom: none;
				}
				.label{
					font-size: 24rpx;
					color: #333;
				}
			}
		}
	}
</style>
